<template>
	<uni-transition mode-class="fade" :styles="maskStyles" :show="show" @change="change">
		<view class="modal-content" @click.stop>
			<view class="modal-header">
				<text class="modal-title">{{ title }}</text>
				<text class="modal-close" @click="handleClose">×</text>
			</view>
			<view class="modal-body">
				<slot></slot>
			</view>
			<view class="modal-footer">
				<view class="modal-btn cancel" @click="handleCancel">
					<text>{{ cancelText }}</text>
				</view>
				<view class="modal-btn confirm" @click="handleConfirm">
					<text>{{ confirmText }}</text>
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script setup>
/**
 * Modal 弹窗组件
 * @description 一个通用的弹窗组件，支持自定义标题、内容和按钮文字
 *
 * @example
 * <template>
 *   <Modal
 *     v-model:show="showModal"
 *     title="温馨提示"
 *     cancel-text="取消"
 *     confirm-text="确定"
 *     @confirm="handleConfirm"
 *     @cancel="handleCancel"
 *     @close="handleClose"
 *   >
 *     <text>自定义内容</text>
 *   </Modal>
 * </template>
 *
 * @property {Boolean} show - 控制弹窗显示/隐藏
 * @property {String} title - 弹窗标题，默认：'提示'
 * @property {String} cancelText - 取消按钮文字，默认：'取消'
 * @property {String} confirmText - 确认按钮文字，默认：'确定'
 *
 * @event {Function} confirm - 点击确认按钮时触发
 * @event {Function} cancel - 点击取消按钮时触发
 * @event {Function} close - 点击关闭按钮时触发
 * @event {Function} update:show - 更新显示状态
 */
import { defineProps, defineEmits, computed } from "vue"

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: "提示"
	},
	cancelText: {
		type: String,
		default: "取消"
	},
	confirmText: {
		type: String,
		default: "确定"
	}
})

const maskStyles = computed(() => ({
	position: "fixed",
	left: 0,
	right: 0,
	top: 0,
	bottom: 0,
	backgroundColor: "rgba(0, 0, 0, 0.6)",
	zIndex: 999
}))

const emit = defineEmits(["update:show", "cancel", "confirm", "close"])

const handleClose = () => {
	emit("update:show", false)
	emit("close")
}

const handleCancel = () => {
	emit("update:show", false)
	emit("cancel")
}

const handleConfirm = () => {
	emit("update:show", false)
	emit("confirm")
}

const change = (e) => {
	// console.log('过渡动画状态：', e)
}
</script>

<style lang="scss" scoped>
.modal-content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 560rpx;
	background-color: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
	animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.modal-header {
	position: relative;
	padding: 30rpx;
	text-align: center;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.modal-close {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
	font-size: 40rpx;
	color: #999;
	line-height: 1;
}

.modal-body {
	padding: 40rpx 30rpx;
}

.modal-footer {
	display: flex;
	border-top: 1rpx solid #eee;
}

.modal-btn {
	flex: 1;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		font-size: 32rpx;
	}

	&.cancel {
		border-right: 1rpx solid #eee;

		text {
			color: #666;
		}
	}

	&.confirm {
		text {
			color: #2979ff;
		}
	}

	&:active {
		background-color: #f5f5f5;
	}
}
</style>
